<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>播放页</title>
	
	    <!-- Bootstrap -->
	    <link href="/hoyo/css/bootstrap.min.css" rel="stylesheet">
	    <link href="/hoyo/css/mine.css" rel="stylesheet" />
	    <link href="/hoyo/css/DPlayer.min.css" rel="stylesheet"/>
	    <style>
		    a:hover{
	    		text-decoration: none !important;
	    		color:#00a1d6 !important;
	    	}
	    	.info .icon{
	    		width: 18px;
	    		height: 18px;
	    		padding-top: 2px ;
	    	}
	    	.info{
	    		font-family: "微软雅黑";
	    		font-size: 14px;
	    		line-height: 23px;
	    		padding-top: 6px;
	    		padding-bottom: 10px;
	    		height: 23px;
	    		box-sizing: content-box;
	    	}
	    	.main-info{
	    		padding-top: 20px ;
	    		padding-bottom: 20px;
	    	}
	    	.data-icon-padding{
	    		padding-right: 10px;
	    	}
	    	.title-info{
	    		font-size: 12px;
	    		line-height: 18px;
	    		padding-top: 5px;
	    		padding-bottom: 5px;
	    	}
	    	.user-info{
	    		padding-top: 28px;
	    	}
	    	.name{
	    		margin-bottom: 5px;
	    	}
	    	.intro{
	    		margin-bottom: 5px;
	    		font-size: 12px;
	    	}
	    	.list-btn{
	    		width: 135px;
	    		text-align: left;
	    		padding: 3px 7px;
	    		margin-right: 20px;
	    		margin-bottom: 12px;
	    		overflow: hidden;
	    		color: #222222;
	    		background-color: #FFFFFF;
	    		border: 1px solid #ccd0d7;
	    	}
	    	.list-btn:hover{
	    		background-color: #00a1d6 !important;
	    		color: #FFFFFF;
	    	}
	    	.list-btn-active{
	    		background-color: #00a1d6;
	    		color: #FFFFFF;
	    	}
	    	.movie-list{
	    		margin-bottom: 20px;
	    	}
	    	.player-container{
	    		width: 100%;
	    		height: 473px;
	    		margin-bottom: 20px;
	    		box-shadow: #ddd 0 0 5px;
	    		border: 1px solid #e5e9ef;
	    		box-sizing: content-box;
	    	}
	    	.player-bc{
	    		border-top: 1px solid #e5e9ef;
	    		border-bottom: 1px solid #e5e9ef;
	    		background-color: #f6f9fa;
	    		padding: 20px 0;
	    		
	    	}
	    	.movie-intro{
	    		margin-top: 20px;
	    		margin-bottom: 20px;
	    		padding-left: 5px;
	    		padding-right: 5px;
	    	}
	    	.comment{
	    		padding-left: 10px;
	    	}
	    	.comment-list{
	    		margin-bottom: 20px;
	    		border-bottom: 1px solid #e5e9ef;
	    	}
	    	.comment-type-active{
	    		border-bottom:#1296db solid 1px;
	    	}
	    	.comment-type{
	    		position: relative;
	    	}
	    	.comment-type-sanjiao{
	    		position: absolute;
	    		bottom: -12px;
	    		left:42%;
	    	}
	    	.nav-tabs{
	    		border: none;
	    	}
	    	.comment-page{
	    		text-align: right;
	    		line-height: 42px;
	    	}
	    	.btn-send{
	    		height:64px !important;
	    		padding: 11px 4px;
	    		color: #FFFFFF;
	    		width: 64px;
	    		font-size: 14px;
	    	}
	    	.comment-send{
	    		padding-top: 20px;
				padding-bottom: 20px;
	    	}
	    	.comment-name{
	    		padding-top: 10px;
	    		padding-bottom: 10px;
	    	}
	    	.comment-intro{
	    		padding-top: 5px;
	    		border-top: 1px solid #e5e9ef;
	    		margin-bottom: 20px;
	    		padding-bottom: 15px;
	    	}
	    	.comment-send-right{
	    		padding-bottom: 20px;
	    		padding-left: 0px;
	    		margin-left: 15px;
	    	}
	    	.floor{
	    		padding:5px 10px;
	    	}
	    	.time{
	    		padding:5px 10px;
	    	}
	    	.like-number{
	    		padding: 5px 10px;
	    	}
	    	.comment-btn{
	    		border: none;
	    		font-size: 14px;
	    		padding: 5px 10px;
	    		color: #99a2aa;
	    	}
	    	.comment-info{
	    		margin-bottom: 10px;
	    		height: 30px;
	    		line-height: 30px;
	    		color: #99a2aa;
	    	}
	    	.comment-bottom-page{
	    		margin: 0;
	    		padding-left: 15px;
	    	}
	    	.comment-bottom-page li a{
	    		margin-right: 8px;
	    		border-radius: 6px;
	    	}
	    	footer{
	    		margin-top: 50px;
	    	}
	    	.no-border{
	    		border-bottom: 0;
	    	}
	    	.hot-line{
	    		text-align: center;
	    		border-bottom: 1px solid #e5e9ef;
	    		position:relative;
	    		font-size: 12px;
	    		margin: 50px 0 50px 0;
	    	}
	    	.hot-line span{
	    		position: absolute;
	    		top: -7px;
	    		left: 40%;
	    		background-color: #FFFFFF;
	    		padding: 0 20px;
	    	}
	    	.normal-comment{
	    		border-bottom: 1px solid #e5e9ef;
	    		border-top:0;
	    	}
	    	.danmu-list-content{
	    		width: 300px;
	    		height: 473px;
	    		float: right;
	    		color: #99A2AA;
	    	}
	    	.danmu-list-info{
	    		height: 60px;
	    		font-size: 18px;
	    		line-height: 60px;
	    		padding-left: 20px;
	    		border-bottom: 1px solid #e2e2e2;
	    		color: #00a1a6;
	    		font-weight: bold;
	    	}
	    	.danmu-list-title .danmuku-appear-time{
	    		width: 60px;
	    		height: 32px;
	    		padding-left: 20px;
	    		font-size: 12px;
	    		display: inline-block;
	    		box-sizing: border-box;
	    		line-height: 32px;
	    		overflow: hidden;
	    	}
	    	.danmu-list-title .danmuku-text{
	    		display: inline-block;
	    		width: 146px;
	    		height: 32px;
	    		padding-left: 8px;
	    		padding-right: 8px;
	    		font-size: 12px;
	    		box-sizing: border-box;
	    		line-height: 32px;
	    		overflow: hidden;
	    	}
	    	.danmu-list-title .danmuku-time{
	    		display: inline-block;
	    		width: auto;
	    		height: 32px;
	    		padding-left: 8px;
	    		font-size: 12px;
	    		box-sizing: border-box;
	    		line-height: 32px;
	    		overflow: hidden;
	    	}
	    	.danmu-list-ul{
	    		list-style: none;
	    		padding: 0;
	    		margin: 0;
	    	}
	    	.danmu-list-ul li{
	    		height: 25px;

	    	}
	    	.danmu-list-ul .danmuku-appear-time{
	    		width: 60px;
	    		height: 25px;
	    		padding-left: 20px;
	    		font-size: 12px;
	    		display: inline-block;
	    		box-sizing: border-box;
	    		line-height: 25px;
	    		overflow: hidden;
	    	}
	    	.danmu-list-ul .danmuku-text{
	    		display: inline-block;
	    		width: 146px;
	    		height: 25px;
	    		padding-left: 8px;
	    		padding-right: 8px;
	    		font-size: 12px;
	    		box-sizing: border-box;
	    		line-height: 25px;
	    		overflow: hidden;
	    	}
	    	.danmu-list-ul .danmuku-time{
	    		display: inline-block;
	    		width: auto;
	    		height: 25px;
	    		padding-left: 8px;
	    		font-size: 12px;
	    		box-sizing: border-box;
	    		line-height: 25px;
	    		overflow: hidden;
	    	}
	    	#danmu-list-ul{
	    		width: 300px;
	    		height: 375px;
	    	}
	    	.danmu-label{
	    		width: 100px;
	    		padding: 0;
	    		margin: 0;
	    		height: 40px;
	    	}
	    	.danmu-radio{
	    		margin-left: 3px;
	    	}
	    	.danmu-report-error{
	    		color: #FFFFFF;
	    		border-radius: 5px;
	    		padding: 8px 12px;
	    		font-size: 14px;
	    	}
	    	.danmu-report-btn{
	    		padding: 1px 10px !important;
	    		line-height: none !important;
	    		font-size: 10px !important;
	    		border-radius: 6px !important;
	    		margin-left: 10px;
	    		border: none;
	    	}
	    	.danmu-report-content{
	    		font-size: 18px;
	    		text-align: center;
	    	}
	    	.movie-info{
	    		padding-left: 15px;
	    	}
	    	.dplayer-comment-setting-type label{
	    		display:inline !important;
	    	}
	    	
	    	.modal-title{
	    		font-weight: bold;
	    		text-align: center;
	    		
	    	}
	    	#movie-report p{
	    		padding: 5px 0 5px 30px;
	    	}
	    	.modal-body-title{
	    		padding-left: 16px !important;
	    	}
	    	#movie-report p label{
	    		padding-left: 10px;
	    	}
	    	.change-text{
	    		font-style: normal;
	    		color: palevioletred;
	    	}
	    	#movie-report .modal-body{
	    		padding: 50px !important;
	    	}
	    	.modal-report-error{
	    		color: palevioletred;
	    		font-size: 14px;
	    		padding-left: 16px !important;
	    	}
	    	
	    	
	    	#comment-report .modal-body{
	    		padding: 40px !important;
	    	}
	    	
	    	#comment-report .modal-body span{ 
	    		display: inline-block;
	    		width: 120px;
	    		margin-bottom: 20px;
	    	}
	    	#comment-report .modal-body label{ 
	    		padding-left: 6px;
	    	}
	    </style>
	</head>
	<body>
      		
		<div id="data-nav" class="navbar">
	  	<div class="data-fluid"></div>
	  	<div class="data-nav"></div>
			<div class="container">
		  	<div class="navbar-header">
		      <a class="navbar-brand" href="/hoyo/">
		      	<img src="/hoyo/img/logo.png" class="data-img"/>
		      	<span class="data-span">主页</span>
		      </a>
		    </div>
		
	      <ul id="contributor" class="nav navbar-nav navbar-right">
	      	<li th:if="${session.userInfo!=null}">
	      		<a class="data-user" href="/hoyo/user/personalCenter">
	      			<img th:src="${session.userInfo.icon}" class="data-img img-circle" />
	      			<span class="nav-user-name" th:text="${session.userInfo.nickname}">iscream</span>
	      		</a>
	      	</li>
	      	<li th:if="${session.user==null}">
	      		<a href="/hoyo/login">
	      			<span>登录</span>
	      		</a>
	      	</li>
	      	<li th:if="${session.user==null}">
	      		<a href="/hoyo/register" style="padding-right:84px;">
	      			<span>注册</span>
	      		</a>
	      	</li>
	      	
	        <li class="dropdown">
	          <a href="/hoyo/upload" class="dropdown-toggle data-color">投稿</a>
	      	</li>
	      </ul>
		  </div>
		</div>
      
	  <div id="data-channel-type" class="container">
	  	<div class="row navbar">
	  		<ul class="data-channel-type nav navbar-nav">
	  			<li>
	  				<a href="/hoyo/">
	  					<svg class="icon" aria-hidden="true">
	  						<use xlink:href="#icon-shouye_shouye"></use>
	  					</svg>
	  						<span class="data-right icon-font">首页</span>
	  				</a>
	  			</li>
	  			<li th:each="channel : ${channels}"><a th:href="'/hoyo/channel/'+${channel.id}"><span class="icon-font" th:text="${channel.channelName}">动漫</span><span class="badge" th:text="${channel.movieCount}">42</span></a></li>
	  		</ul>
	  	</div>
	  </div>
	  
	  <div class="main-info container-fluid">
	  	<div class="container">
	  		<div class="row">
	  			<div class="col-lg-8">
			  		<div class="row movie-info">
			  			<input id="movieId" type="hidden" value="-1"/>
		  				<div class="title">
		  					<h3 th:text="${catalog.catalogName}">《凉凉》三生三世十里桃花片尾曲</h3>
		  				</div>
			  		</div>
			  		<div class="row title-info">
	  					<div class="col-lg-3">
	  						<span><a href="/hoyo/">主页</a></span>
		  					<span class="glyphicon glyphicon-menu-right"></span>
		  					<span><a th:href="'/hoyo/channel/'+${catalog.channelId}" th:text="${catalog.channelName}">音乐</a></span>
	  					</div>
	  					<div class="col-lg-3"><span th:text="${#calendars.format(catalog.createTime, 'yyyy-MM-dd HH:mm:ss')}">2017-05-07 15:18</span></div>
	  					<div class="col-lg-2" ><span th:if="${session.user!=null}" onclick="catalogReport()"  style="cursor:pointer;color:#00a1d6;">稿件投诉</span></div>
	  					<div class="col-lg-2"><span id="user-like-catalog" th:if="${session.user!=null}" onclick="submitLike()"  style="cursor:pointer;color:#00a1d6;" th:text="${isliked}?'已收藏':'收藏该视频'">收藏该视频</span></div>
			  		</div>
			  		
			  		<div class="row info">
	  					<div class="col-lg-2">
	  						<div class="data-left data-icon-padding">
	  							<svg class="icon" aria-hidden="true">
								  <use xlink:href="#icon-shipin4"></use>
								</svg>
	  						</div>
	  						<span th:if="${catalog.playAmount>10000}" th:text="${catalog.playAmount/100/100.0}+'万'">播放1.2万</span>
	  						<span th:unless="${catalog.playAmount>10000}" th:text="${catalog.playAmount}">硬币1.2万</span>
	  					</div>
	  					<div class="col-lg-2">
	  						<div class="data-left data-icon-padding">
	  							<svg class="icon" aria-hidden="true">
								  <use xlink:href="#icon-pinglun"></use>
								</svg>
	  						</div>
	  						<span th:if="${catalog.danmuAmount>10000}" th:text="${catalog.danmuAmount/100/100.0}+'万'">硬币1.2万</span>
	  						<span th:unless="${catalog.danmuAmount>10000}" th:text="${catalog.danmuAmount}">硬币1.2万</span>
	  					</div>
	  					<div class="col-lg-2">
	  						<div class="data-left data-icon-padding">
	  							<svg class="icon" aria-hidden="true">
								  <use xlink:href="#icon-shoucang1"></use>
								</svg>
	  						</div>
	  						<span th:if="${catalog.collectAmount>10000}" th:text="'已收藏'+${catalog.collectAmount/100/100.0}+'万'">已收藏1.2万</span>
	  						<span th:unless="${catalog.collectAmount>10000}" th:text="'已收藏'+${catalog.collectAmount}">已收藏1.2万</span>
	  					</div>
			  		</div>
	  			</div>
		  		<div class="col-lg-4">
		  			<div class="row user-info">
			  			<div class="col-lg-3">
			  				<div class="user-img">
			  					<img th:src="${catalog.icon}" class="img-circle"  style="width: 68px;height: 68px;"/>
			  				</div>
			  			</div>
			  			<div class="col-lg-9 ">
			  				<div class="info">
			  					<p class="name" th:text="${catalog.nickname}">Soviet</p>
				  				<p class="intro" th:text="${catalog.description}">这个人很懒，什么也没留下~~</p>
			  				</div>
			  			</div>
		  			</div>
		  		</div>
			</div>
	  	</div>
	  	
	  </div>
	  <div class="container-fluid player-bc">
	  	<div class="container">
		  	<div class="movie-list" id="movie-list" style="display: none;"> 
		  		<button type="button" class="list-btn btn btn-sm"  :title="item.movieName" :class="{ 'list-btn-active': item.selected }" v-for="(index, item) of items" @click="videoSwitch(index,item.id,item.realPath)">
		  			<span>{{ index+1 }}、</span>
		  			<span>{{ item.movieName }}</span>
		  		</button>
		  	</div>
		  	<div class="player-container">
		  		<div style="float: left;width: 840px;height: 473px;">
		  			<div class="dplayer" id="dplayer1" style="width: 100%;height: 100%;"></div>
		  		</div>
		  		<div class="danmu-list-content">
		  			<div class="danmu-list-info">
		  				弹幕列表
		  			</div>
		  			<div class="danmu-list-title">
		  				<span class="danmuku-appear-time">时间</span>
		  				<span class="danmuku-text">弹幕内容</span>
		  				<span class="danmuku-time">发送时间</span>
		  				<div id="danmu-list-ul">
		  					
		  				</div>
		  			</div>
		  		</div>
		  	</div>
	  	</div>
	  </div>
	 	<div id="danmu-report" style="display: none;">
		    <aside :show.sync="showRight" placement="right" header="弹幕举报" :width="350">
		    	<h4 style="font-weight: bold;">弹幕内容</h4>
		    	<p class="danmu-report-content">{{content}}</p>
		        <p v-show="reportError" id="danmu-report-error" class="danmu-report-error label-danger">请输入具体理由！</p>
		        <input type="text" id="danmuId" style="display: none;" v-bind:value="danmuId" disabled="true" />
		        <div style="margin-top: 20px;">
		        	<label v-for="item in reportType" class="danmu-label">
		        		<input type="radio"  name='danmu-radio'  v-bind:value="item" @click="radioClick(item)"/>
		        		<span class='danmu-radio'>{{item}}</span>
		        	</label>
		        </div>
		        <textarea id='danmu-report-textarea' class="form-control" v-show='inputed' @click="textareaChanged()" style="margin-bottom: 20px;"></textarea>
		        <button class="btn btn-info" :disabled="choosed" @click="reportSubmit()">确定</button>
		     </aside>
		</div>
		
		<div id="movie-report" style="display:none;">
		     <modal :show.sync="fadeModal" effect="fade" width="400">
		        <div slot="modal-header" class="modal-header">
		          <h5 class="modal-title">
		            	稿件投诉
		          </h5>
		        </div>
		        <div slot="modal-body" class="modal-body">
		        	<p class="modal-body-title">你觉得这个稿件有什么问题?</p>
		        	<p><input type="radio" name="modal-radio" @click="selected(1)"/><label>存在色情、暴力、反动内容</label></p>
		        	<p><input type="radio" name="modal-radio" @click="selected(2)"/><label>与站内其他视频重复</label></p>
		        	<p><input type="radio" name="modal-radio" @click="selected(3)"/><label>有其它问题</label></p>
		        	<p>为帮助审核人员更快处理，请补充<em class="change-text">{{typeText}}</em>等详细信息</p>
		        	<textarea class="form-control" rows="5" style="margin-top: 25px;" :value="info.description" @input="checkInput($event.target.value)"  :placeholder="placeholder">
		        		
		        	</textarea>
		        	<p v-show="hasError" class="modal-report-error">{{errorMsg}}</p>
		        </div>
		        <div slot="modal-footer" class="modal-footer">
		          <button type="button" class="btn btn-info" @click='submited()' id="movie-report-btn">提交投诉</button>
		          <button type="button" class="btn btn-default" @click='fadeModal = false'>取消</button>
		        </div>
		      </modal>
		</div>
		
		
		<div id="comment-report" style="display:none;">
		     <modal :show.sync="fadeModal" effect="fade" width="400">
		        <div slot="modal-header" class="modal-header">
		          <h5 class="modal-title">
		            	请选择举报理由
		          </h5>
		        </div>
		        <div slot="modal-body" class="modal-body">
		        	<p>违反法律法规</p>
		        	<div>
		        		<span><input type="radio" name="comment-report-radio" @click="selected('违法违规')"><label>违法违规</label></span>
		        		<span><input type="radio" name="comment-report-radio" @click="selected('色情')"><label>色情</label></span>
		        		<span><input type="radio" name="comment-report-radio" @click="selected('低俗')"><label>低俗</label></span>
		        		<span><input type="radio" name="comment-report-radio" @click="selected('赌博诈骗')"><label>赌博诈骗</label></span>
		        	</div>
		        	<p>侵犯个人权益</p>
		        	<div>
		        		<span><input type="radio" name="comment-report-radio" @click="selected('人身攻击')"><label>人身攻击</label></span>
		        		<span><input type="radio" name="comment-report-radio" @click="selected('侵权隐私')"><label>侵权隐私</label></span>
		        	</div>
		        	<p>有害社区环境</p>
		        	<div>
		        		<span><input type="radio" name="comment-report-radio" @click="selected('垃圾广告')"><label>垃圾广告</label></span>
		        		<span><input type="radio" name="comment-report-radio" @click="selected('引战')"><label>引战</label></span>
		        		<span><input type="radio" name="comment-report-radio" @click="selected('剧透')"><label>剧透</label></span>
		        		<span><input type="radio" name="comment-report-radio" @click="selected('刷屏')"><label>刷屏</label></span>
		        	</div>
		        	
		        	<div>
		        		<span style="margin-bottom: 6px;"><input type="radio" name="comment-report-radio"  @click="selected('其他')"><label>其他</label></span>
		        		<textarea class="form-control" rows="3" :value="info.reason" @input="checkInput($event.target.value)" placeholder="自定义理由" v-show="selectOther">
		        			
		        		</textarea>
		        	</div>	
		        	<p v-show="hasError" class="modal-report-error">{{errorMsg}}</p>
		        </div>

		        <div slot="modal-footer" class="modal-footer">
		          <button type="button" class="btn btn-info" @click='submited()' id="comment-report-btn">确定</button>
		          <button type="button" class="btn btn-default" @click='fadeModal = false'>取消</button>
		        </div>
		      </modal>
		</div>
		
		
		
	  <div class="container">
	  	<div class="row movie-intro">
			<div class="col-lg-8" th:text="${catalog.introduction}">
				4k画质原视频https://youtu.be/Ui-jotZYJJA?t=1</br></br>
				2012年版本视频av231787。</br>
				美国TouhouCraft服务器于2010年开始制作东方Minecraft地图，于2017年5月正式关服并放出存档。</br>
				
				地图为1.11版MC纯原版制作</br>
				严禁用于任何商业行为（含基于该图制作氪金道具）</br>
			</div>
	  	</div>
	  	<div class="row" id="comments" style="display:none;">
	  		<div class="col-lg-8">
	  			<h3 th:text="${catalog.movies[0].commentAmount}">2312<span class="comment-font">评论</span></h3>
	  			<div class="row comment-list">
	  				<div class="comment-type col-lg-4">
	  					<ul class="nav nav-tabs">
	  						<li class="comment-type-active">
	  							<a v-on:click="switch2comments(1)"  style="cursor: pointer">全部评论</a>
	  							<div class="comment-type-sanjiao" id="commentsMarker">
	  								<svg class="icon" aria-hidden="true">
									  <use xlink:href="#icon-sanjiao"></use>
									</svg>
	  							</div>
	  						</li>
	  						<li><a v-on:click="switch2topComments(1)" style="cursor: pointer">热门评论</a>
	  							<div class="comment-type-sanjiao" id="topCommentsMarker" style="display:none">
	  								<svg class="icon" aria-hidden="true">
									  <use xlink:href="#icon-sanjiao"></use>
									</svg>
	  							</div>
	  						</li>
	  					</ul>
	  				</div>
	  			</div>
	  			<div class="row comment-send">
	  				<div class="col-lg-1">
	  					<img th:src="${session.user!=null} ? ${session.userInfo.icon} : '/hoyo/img/morentouxiang.jpg'" width="48px" height="48px" class="img-circle"/>
	  				</div>
	  				<div class="col-lg-10 comment-send-right">
	  					<div class="row">
			  				<div class="col-lg-10">
			  					<textarea id="comment" rows="3" style="font-size: 12px;"  class="form-control"  th:if="${session.user!=null}" placeholder="请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论" ></textarea>
			  					<textarea id="comment" rows="3" style="font-size: 12px;"  class="form-control"  th:unless="${session.user!=null}" disabled="true" placeholder="请先 登录 后发表评论(・ω・)" style="background-color: #e5e9ef !important;"></textarea>
			  				</div>
			  				<div class="col-lg-2" style="padding: 0;">
			  					<span class="btn btn-info btn-send"  th:unless="${session.user!=null}" disabled="true" style="background-color: #e5e9ef !important;">发表<br>评论</span>
			  					<span class="btn btn-info btn-send"   th:if="${session.user!=null}" v-on:click="sendComment($event)" >发表<br>评论</span>
			  				</div>
	  					</div>
	  				</div>
	  			</div>
	  			<div class="row comment-row" id="topComments">
	  				<template v-for="comment in topComments">
	  				<div class="col-lg-1">
	  					<img v-bind:src="comment.icon" width="48px" height="48px" class="img-circle"/>
	  				</div>
	  				<div class="col-lg-11 comment-intro normal-comment">
	  					<!-- <input v-bind:id="'topComment'+${comment.id}+'userId'" type="hidden" th:value="${comment.userId}"/> -->
	  					<p class="comment-name"><a href="#">{{comment.nickname}}</a></p>
	  					<p>{{comment.comment}}</p>
	  					<div class="row comment-info">
	  						<span class="floor">#{{comment.floorNumber}}</span>
	  						<span class="time">{{dateFormat(comment.createTime)}}</span>
	  						<span class="like-number">
	  							<svg class="icon" aria-hidden="true">
								  <use xlink:href="#icon-iconfontdianzan"></use>
								</svg>
	  							<span>{{comment.likePoints}}</span>
	  						</span>
	  						<button class="btn btn-default comment-btn" th:if="${session.user!=null}" v-on:click="showReply($event, comment.id, comment.userId, 0)">参与回复</button>
	  						<button class="btn btn-default comment-btn" th:if="${session.user!=null}" v-on:click="commentReport(comment.id,'1')">举报</button>
	  					</div>
	  					<div class="re-comment">
	  						<div class="row"  v-for="replyComment in comment.pageInfo.list">
	  							<div class="col-lg-1">
	  								<img v-bind:src="replyComment.icon" width="24px" height="24px" class="img-circle"/>
	  							</div>
	  							<div class="col-lg-11">
	  								<div class="row">
	  									<p v-if="replyComment.replyUserId==comment.userId">{{replyComment.nickname}}<span>:</span>{{replyComment.comment}}</p>
	  									<p v-else>{{replyComment.nickname}}  回复 @{{replyComment.replyUserNickname}}<span>:</span>{{replyComment.comment}}</p>
	  								</div>
	  								<div class="row comment-info">
	  									<span class="time">{{dateFormat(replyComment.createTime)}}</span>
				  						<span class="like-number">
				  							<svg class="icon" aria-hidden="true">
											  <use xlink:href="#icon-iconfontdianzan"></use>
											</svg>
											<span>{{replyComment.likePoints}}</span>
				  						</span>
				  						<span class="btn btn-default comment-btn" v-on:click="showReply($event, comment.id, replyComment.userId, 0)" th:if="${session.user!=null}">回复</span>
				  						<span class="btn btn-default comment-btn" th:if="${session.user!=null}"   v-on:click="commentReport(comment.id,'2')">举报</span>
	  								</div>
	  							</div>
	  						</div>
	  					</div> 
	  					<div class="re-comment-page" v-if="comment.pageInfo.size>0">
		  					<span class="result">共{{comment.pageInfo.pages}}页</span>
		  					<a class="prev" style="display:inline-block; margin:0 .25em 0 .25em;cursor: pointer" v-if="!comment.pageInfo.isFirstPage" v-on:click="getReplyComments(comment.id,1,0)">首页</a>
		  					<a class="prev" style="display:inline-block; margin:0 .25em 0 .25em;cursor: pointer" v-if="comment.pageInfo.hasPreviousPage" v-on:click="getReplyComments(comment.id,comment.pageInfo.pageNum-1,0)">上一页</a>
		  					<span v-if="comment.pageInfo.pages>1" v-for="pageNumber in comment.pageInfo.navigatePageNums">
		  						<a class="tcd-number" style="display:inline-block; margin:0 .25em 0 .25em;cursor: pointer" v-if="comment.pageInfo.pageNum!=pageNumber" v-on:click="getReplyComments(comment.id,pageNumber,0)">{{pageNumber}}</a>
		  						<span style="display:inline-block; margin:0 .25em 0 .25em;cursor: pointer" v-if="comment.pageInfo.pageNum==pageNumber">{{pageNumber}}</span>
		  					</span>
		  					<a class="next" style="display:inline-block; margin:0 .25em 0 .25em;cursor: pointer" v-if="comment.pageInfo.hasNextPage" v-on:click="getReplyComments(comment.id,comment.pageInfo.pageNum+1,0)">下一页</a>
		  					<a class="next" style="display:inline-block; margin:0 .25em 0 .25em;cursor: pointer" v-if="!comment.pageInfo.isLastPage" v-on:click="getReplyComments(comment.id,comment.pageInfo.pages,0)">尾页</a>
		  				</div>
	  				</div>
	  				</template>
	  			</div>
	  			<div class="hot-line">
					<span>
						以上为热门评论，<a class="more-hot">查看更多</a>
					</span>
				</div>
	  			<div class="row comment-row">
	  				<template v-for="comment in commentPage.list">
	  				<div class="col-lg-1">
	  					<img v-bind:src="comment.icon" width="48px" height="48px" class="img-circle"/>
	  				</div>
	  				<div class="col-lg-11 comment-intro normal-comment">
	  					<p class="comment-name"><a href="#">{{comment.nickname}}</a></p>
	  					<p>
	  						{{comment.comment}}
	  					</p>
	  					<div class="row comment-info">
	  						<span class="floor">#{{comment.floorNumber}}</span>
	  						<span class="time">{{dateFormat(comment.createTime)}}</span>
	  						<span class="like-number">
	  							<svg class="icon" aria-hidden="true">
								  <use xlink:href="#icon-iconfontdianzan"></use>
								</svg>
	  							<span>{{comment.likePoints}}</span>
	  						</span>
	  						<button class="btn btn-default comment-btn" v-on:click="showReply($event, comment.id, comment.userId, 1)" th:if="${session.user!=null}">参与回复</button>
	  						<button class="btn btn-default comment-btn" th:if="${session.user!=null}"   v-on:click="commentReport(comment.id,'1')">举报</button>
	  					</div>
	  					<div class="re-comment">
	  						<div class="row" v-for="replyComment in comment.pageInfo.list">
	  							<div class="col-lg-1">
	  								<img v-bind:src="replyComment.icon" width="24px" height="24px" class="img-circle"/>
	  							</div>
	  							<div class="col-lg-11">
	  								<div class="row">
	  									<p v-if="replyComment.replyUserId==comment.userId">{{replyComment.nickname}}<span>:</span>{{replyComment.comment}}</p>
	  									<p v-else>{{replyComment.nickname}}  回复 @{{replyComment.replyUserNickname}}<span>:</span>{{replyComment.comment}}</p>
	  								</div>
	  								<div class="row comment-info">
	  									<span class="time">{{dateFormat(replyComment.createTime)}}</span>
				  						<span class="like-number">
				  							<svg class="icon" aria-hidden="true">
											  <use xlink:href="#icon-iconfontdianzan"></use>
											</svg>
											<span>{{replyComment.likePoints}}</span>
				  						</span>
				  						<span class="btn btn-default comment-btn" v-on:click="showReply($event, comment.id, replyComment.userId, 1)" th:if="${session.user!=null}">回复</span>
				  						<span class="btn btn-default comment-btn" th:if="${session.user!=null}" v-on:click="commentReport(comment.id,'2')">举报</span>
	  								</div>
	  							</div>
	  						</div>
	  					</div>
	  					<div class="re-comment-page" v-if="comment.pageInfo.size>0">
		  					<span class="result">共{{comment.pageInfo.pages}}页</span>
		  					<a class="prev" style="display:inline-block; margin:0 .25em 0 .25em;cursor: pointer" v-if="!comment.pageInfo.isFirstPage" v-on:click="getReplyComments(comment.id,1,1)">首页</a>
		  					<a class="prev" style="display:inline-block; margin:0 .25em 0 .25em;cursor: pointer" v-if="comment.pageInfo.hasPreviousPage" v-on:click="getReplyComments(comment.id,comment.pageInfo.pageNum-1,1)">上一页</a>
		  					<span v-if="comment.pageInfo.pages>1" v-for="pageNumber in comment.pageInfo.navigatePageNums">
		  						<a class="tcd-number" style="display:inline-block; margin:0 .25em 0 .25em;cursor: pointer" v-if="comment.pageInfo.pageNum!=pageNumber" v-on:click="getReplyComments(comment.id,pageNumber,1)">{{pageNumber}}</a>
		  						<span style="display:inline-block; margin:0 .25em 0 .25em;cursor: pointer" v-if="comment.pageInfo.pageNum==pageNumber">{{pageNumber}}</span>
		  					</span>
		  					<a class="next" style="display:inline-block; margin:0 .25em 0 .25em;cursor: pointer" v-if="comment.pageInfo.hasNextPage" v-on:click="getReplyComments(comment.id,comment.pageInfo.pageNum+1,1)">下一页</a>
		  					<a class="next" style="display:inline-block; margin:0 .25em 0 .25em;cursor: pointer" v-if="!comment.pageInfo.isLastPage" v-on:click="getReplyComments(comment.id,comment.pageInfo.pages,1)">尾页</a>
		  				</div>
	  				</div>
	  				</template>
	  			</div>
	  			
	  			<div class="row" v-if="commentPage.size>0">
	  				<nav aria-label="Page navigation">
					<ul class="comment-bottom-page pagination pagination-lg" id="commentFooter">
					  <li v-if="!commentPage.isFirstPage" v-on:click="getComments(1, isTopComment)"><a style="cursor: pointer">首页</a></li>
					  <li v-if="commentPage.hasPreviousPage" v-on:click="getComments(commentPage.pageNum-1,isTopComment)"><a style="cursor: pointer">上一页</a></li>
					  <li v-if="commentPage.pages>1" v-for="pageNumber in commentPage.navigatePageNums">
					  	<a v-if="commentPage.pageNum!=pageNumber" v-on:click="getComments(pageNumber,isTopComment)" style="cursor: pointer">{{pageNumber}}</a>
  						<span v-if="commentPage.pageNum==pageNumber">{{pageNumber}}</span>				  
					  </li>
					  <li v-if="commentPage.hasNextPage" v-on:click="getComments(commentPage.pageNum+1,isTopComment)"><a style="cursor: pointer">下一页</a></li>
					  <li v-if="!commentPage.isLastPage" v-on:click="getComments(commentPage.pages,isTopComment)"><a style="cursor: pointer">尾页</a></li>
					</ul>
					</nav>
	  			</div>
	  			
	  			<!-- <div class="row comment-send">
	  				<div class="col-lg-1">
	  					<img th:src="${userInfo!=null} ? ${userInfo.icon} : '/hoyo/img/morentouxiang.jpg'" width="48px" height="48px" class="img-circle"/>
	  				</div>
	  				<div class="col-lg-10 comment-send-right">
	  					<div class="row">
			  				<div class="col-lg-10">
			  					<textarea id="comment" rows="3" style="font-size: 12px;"  class="form-control"  th:if="${userInfo!=null}" placeholder="请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论" ></textarea>
			  					<textarea id="comment" rows="3" style="font-size: 12px;"  class="form-control"  th:unless="${userInfo!=null}" disabled="true" placeholder="请先 登录 后发表评论(・ω・)" style="background-color: #e5e9ef !important;"></textarea>
			  				</div>
			  				<div class="col-lg-2" style="padding: 0;">
			  					<span class="btn btn-info btn-send"  th:unless="${userInfo!=null}" disabled="true" style="background-color: #e5e9ef !important;">发表<br>评论</span>
			  					<span class="btn btn-info btn-send"   th:if="${userInfo!=null}" v-on:click="sendComment($event)" >发表<br>评论</span>
			  				</div>
	  					</div>
	  				</div>
	  			</div> -->
	  		</div>
	  	</div>
	  </div>
	</body>
	<script src="/hoyo/js/flv.min.js"></script>
	<script src="/hoyo/js/hls.min.js"></script>
	<script src="/hoyo/js/DPlayer.min.js"></script>
	<script src="/hoyo/js/vue1.0.26.js"></script>
	<script type="text/javascript" src="/hoyo/js/iconfont.js" ></script>
	<script type="text/javascript" src="/hoyo/js/jroll.min.js" ></script>
	<script type="text/javascript" src="/hoyo/js/vue-strap.min.js"></script>
	<script src="/hoyo/js/jquery-3.2.1.min.js"></script>
	<script src="/hoyo/js/bootstrap.min.js"></script>
	<script th:inline="javascript">
		var danmudata =[
    
    	];
		
		var movies = [[${catalog.movies}]];
		
		 
		var isLogined = [[${session.user!=null}?true:false]];
		movies.forEach(function(movie){
			movie.selected = false;
		});
		movies[0].selected = true;
		
		$("#movieId").val(movies[0].id);
		var competed = false;
		var dp1 = new DPlayer({
	        element: document.getElementById('dplayer1'),
	        autoplay: false,
	        theme: '#FADFA3',
	        loop: false,
	        screenshot: true,
	        hotkey: true,
	        logined: isLogined,
	        video: {
	            url: movies[0].realPath,
	            type: 'auto',
	        },
	        danmaku: {
	        	id: movies[0].id,
	            readAPI: '/hoyo/movie/bullets',
	            sendAPI: '/hoyo/bullet/new'
	        }
	    });
		

		var commentVM = new Vue({
			el: "#comments",
			data: {
				topComments	: [],
				commentPage: {},
				isTopComment: false
			},
			created: function(){
				var vm = this;
				$.get({
					url: "/hoyo/movie/cmts",
					data: "movieId="+movies[0].id,
					success: function(data){
						var result = JSON.parse(data);
						console.log(result);
						vm.topComments = result.topComments;
						vm.commentPage = result.commentPage;
					}
				});
		       	  
		       	$("#comments").show();
			},
			methods:{
				getReplyComments:function getReplyComments(commentId, pageNum, fromType){
					console.info("commmentId:"+commentId+"&&pageNum:"+pageNum);
					var vm = this;
					$.get({
						url: "/hoyo/comment/replyComments",
						data: "commentId="+commentId+"&pageNum="+pageNum,
						success: function(data){
							var result = JSON.parse(data);
							if(result.success){
								var index = vm.findCommentIndexByCommentId(commentId, fromType);
								var comment;
								if(fromType == 0){
									comment = vm.topComments[index];
									comment.pageInfo = result.pageInfo;
								}else{
									comment = vm.commentPage.list[index];
									comment.pageInfo = result.pageInfo;
								}
							}else{
								console.log(result.errorMsg);
							}
						}
					});
				},
				findCommentIndexByCommentId:function(commentId, fromType){
					var index = -1;
					var cmts;
					if(fromType==0){
						cmts = this.topComments;
					}else{
						cmts = this.commentPage.list;
					}
					cmts.forEach(function(comment, idx){
						if(comment.id == commentId){
							index = idx;
						}
					});
					return index;
				},
				getComments: function(pageNum, isTopComment){
					var url = "";
					if(isTopComment){
						url = "/hoyo/movie/topComments";
						this.hideTopComments();
					}else{
						url = "/hoyo/movie/comments";
						if(pageNum == 1){
							this.showTopComments();
						}else{
							this.hideTopComments();
						}
					}
					var vm = this;
					var movieId = $("#movieId").val();
					$.get({
						url:url,
						data:"movieId="+movieId+"&pageNum="+pageNum,
						success:function(data){
							var result = JSON.parse(data);
							console.log(result);
							if(result.success){
								vm.commentPage = result.pageInfo;
							}else{
								
							}
						}
					});
				},
				switch2comments: function(pageNum){
					console.log($("#commentsMarker").css("display"));
					if("block"==$("#commentsMarker").css("display")){
						return ;
					}
					$("#commentsMarker").css("display", "block");
					$("#commentsMarker").parent().attr("class", "comment-type-active");
					$("#topCommentsMarker").css("display", "none");
					$("#topCommentsMarker").parent().attr("class", "");
					this.isTopComment = false;
					this.getComments(pageNum, this.isTopComment);
				},
				switch2topComments: function(pageNum){
					console.log($("#topCommentsMarker").css("display"));
					if("block"==$("#topCommentsMarker").css("display")){
						return ;
					}
					$("#commentsMarker").css("display", "none");
					$("#commentsMarker").parent().attr("class", "");
					$("#topCommentsMarker").css("display", "block");
					$("#topCommentsMarker").parent().attr("class", "comment-type-active");
					this.isTopComment = true;
					this.getComments(pageNum, this.isTopComment);
				},
				hideTopComments:function(){
					$("#topComments").css("display","none");
					$(".hot-line").css("display","none");
				},
				showTopComments:function(){
					$("#topComments").css("display","");
					$(".hot-line").css("display","");
				},
				sendComment:function(){
					console.log($("#comment").val());
					if(""==$("#comment").val().trim()){
						return ;
					}
					var vm = this;
					$.post({
						url:"/hoyo/user/comment/new",
						data:"movieId="+$("#movieId").val()+"&comment="+$("#comment").val().trim(),
						success:function(data){
							var result = JSON.parse(data);
							console.log(result.pageInfo);
							if(result.success){
								$("#comment").val("");
								vm.commentPage = result.pageInfo;
							}else{
								
							}
						}
					});
				},
				dateFormat: function(time){
					var date = new Date();
					date.setTime(time);
					return date.toLocaleString();
				},
				showReply: function(e, commentId, userId, fromType){
					var html = '<div class="col-lg-12 comment-send-right">'+
	  								'<div class="row">'+
	  									'<div class="col-lg-8">'+
	  										'<textarea rows="3" id="replyInput" style="font-size: 12px;"  class="form-control" placeholder="请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论" ></textarea>'+
	  									'</div>'+
	  									'<div class="col-lg-4" style="padding: 0;">'+
	  										'<span class="btn btn-info btn-send" onclick="sendReplyComment(this,'+commentId+','+userId+','+fromType+')" >发表<br>评论</span>'+
	  										'<span class="btn btn-info" style="width:64px; height:64px; margin-left:16px; background-color:#e5e9ef; color:#000000; padding-top: 20px;" onclick="closeWin(this)">取消</span>'+
	  									'</div>'+
	  								'</div>'+
	  							'</div>';
	  				$(e.currentTarget).parent().after(html);
	  				$("#replyInput").focus();
				},
				sendComment:function(e){
					var vm = this;
					var comment = $(e.currentTarget).parent().prev().children("textarea").val().trim();
					if(comment == ""){
						return ;
					}
					$(e.currentTarget).parent().prev().children("textarea").val("");
					$.get({
						url:"/hoyo/user/comment/new",
						data:"movieId="+$("#movieId").val()+"&comment="+comment,
						success: function(data){
							var result = JSON.parse(data);
							console.log(result);
							if(result.success){
								vm.commentPage = result.pageInfo;
							}else{
								
							}
						}
					});
				},
	    		commentReport:function(commentId,type){
	    			CommentReportContainer.info.commentId =commentId;
	    			CommentReportContainer.info.movieId = parseInt($("#movieId").val());
	    			CommentReportContainer.info.type =type;
	    			CommentReportContainer.fadeModal = true; 
	    		}
			}
		});
		
		var videoChangedVM= new Vue({
			el:"#movie-list",
			data:{
				items:movies
			},
			compiled:function(){
				$("#movie-list").show();
			},
			methods:{
				videoSwitch:function(index,mid,url){
					var vm = this;
					$.ajax({
	  					method:"GET",
	  					url:"/hoyo/movie/"+mid,
	  					success:function(data){
	  						var result = JSON.parse(data);
	  						console.log(result);
	  						if(result.success){
	  							switchVideo(mid,result.url);
		  						console.log("GET VIDEO URL SUCCESS: "+result.url);
		  						vm.items.forEach(function(ele,inx,array){
		  							if(index == inx){
		  								ele.selected = true;
		  							}else{
		  								ele.selected = false;
		  							}
		  						});
		  						commentVM.topComments = result.topComments;
		  						commentVM.commentPage = result.commentPage;
	  						}else{
	  							
	  						}
	  					}
	  				});
				}
			}
		});
		
		isCompeted();
		
		function isCompeted(){
			var interval = setInterval(function(){
				if(competed){
					clearInterval(interval);
					clearDanmuList();
					showDanmuList(danmudata,isLogined);
					addJroll();
				}
			},30);
		}
		
		function addJroll(){
			var jroll=new JRoll("#danmu-list-ul", {scrollBarY:true});
			$("#danmu-list-ul").mouseover(function(){
				disable_scroll();
			});
			$("#danmu-list-ul").mouseout(function(){
				enable_scroll();
			});
		};
			
		function clearDanmuList(){
			$("#danmu-list-ul").html("");
		}
		
		function showDanmuList(list,isLogined){
		  	var len = list.length;
		  	var str = "<ul class='danmu-list-ul' id='danmu-ul'>";
		  	if(isLogined){
		  		for(var i=0;i<len;i++){   
					str += "<li data-id="+list[i].id+"><span class='danmuku-appear-time'>"+secondToTime(list[i].appearedTime)+"</span><span class='danmuku-text'>"+list[i].content+"</span><div class='danmuku-time' onmouseover='danmulistMouseOver(this)' onmouseout='danmulistMouseOut(this)'><span class='danmuku-time' >"+fomatDateTime(fomatTimeStamp(list[i].createTime))+"</span><span style='display:none' class='btn btn-info btn-sm danmu-report-btn' onclick='danmuReport(this)'>举报</span></div></li>";//2016-12-15 20:46:34
				}
		  	}else{
		  		for(var i=0;i<len;i++){   
					str += "<li data-id="+list[i].id+"><span class='danmuku-appear-time'>"+secondToTime(list[i].appearedTime)+"</span><span class='danmuku-text'>"+list[i].content+"</span><div class='danmuku-time'><span class='danmuku-time' >"+fomatDateTime(fomatTimeStamp(list[i].createTime))+"</span></div></li>";
				}
		  	}
		  	str +="</ul>";
		  	$("#danmu-list-ul").html(str);
		}
		
		
		function showDanmu(item,isLogined){
			var str ='';
		  	if(isLogined){ 
		  		    str += "<li data-id="+item.id+"><span class='danmuku-appear-time'>"+secondToTime(item.appearedTime)+"</span><span class='danmuku-text'>"+item.content+"</span><div class='danmuku-time' onmouseover='danmulistMouseOver(this)' onmouseout='danmulistMouseOut(this)'><span class='danmuku-time' >"+fomatDateTime(fomatTimeStamp(item.createTime))+"</span><span style='display:none' class='btn btn-info btn-sm danmu-report-btn' onclick='danmuReport(this)'>举报</span></div></li>";
		  	}else{
					str += "<li data-id="+item.id+"><span class='danmuku-appear-time'>"+secondToTime(item.appearedTime)+"</span><span class='danmuku-text'>"+item.content+"</span><div class='danmuku-time'><span class='danmuku-time' >"+fomatDateTime(fomatTimeStamp(item.createTime))+"</span></div></li>";
		  	}
		  	$("#danmu-ul").append(str);
		}
		
		function preventDefault(e) {
   			 e = e || window.event;
    		if (e.preventDefault)
        		e.preventDefault();
    			e.returnValue = false;
			}
		
		function danmulistMouseOver(e){
			var span = $(e).children();
			$(span[0]).hide();
			$(span[1]).show();
		}
		function danmulistMouseOut(e){
			var span = $(e).children();
			$(span[0]).show();
			$(span[1]).hide();
		}
			
		function wheel(e) {
		    preventDefault(e);
		}
		
		function disable_scroll() {
		    if (window.addEventListener) {
		        window.addEventListener('DOMMouseScroll', wheel, false);
		    }
		    window.onmousewheel = document.onmousewheel = wheel;
		}
		
		function enable_scroll() {
		    if (window.removeEventListener) {
		        window.removeEventListener('DOMMouseScroll', wheel, false);
		    }
		    window.onmousewheel = document.onmousewheel = document.onkeydown = null;
		}
		
		function addZero(num){
			return num < 10 ? '0' + num : '' + num;
		}
		
        function secondToTime(second){
        	var min = parseInt(second / 60);
        	var sec = parseInt(second - min * 60);
        	return addZero(min) + ':' + addZero(sec);
        }
		
		function fomatDateTime(date){
			var time = date.split(" ");
			var day = time[0].substring(parseInt(time[0].indexOf("-"))+1);
			var hour = time[1].substring(0,time[1].lastIndexOf(":"));
			return day+"&nbsp;&nbsp;"+hour;
		}
		
		function  fomatTimeStamp(TimeStamp){
			var time= new Date(TimeStamp).Format("yyyy-MM-dd hh:mm:ss");
			return time;
		}
		
		Date.prototype.Format = function(format) {
	       var date = {
	              "M+": this.getMonth() + 1,
	              "d+": this.getDate(),
	              "h+": this.getHours(),
	              "m+": this.getMinutes(),
	              "s+": this.getSeconds(),
	              "q+": Math.floor((this.getMonth() + 3) / 3),
	              "S+": this.getMilliseconds()
	       };
	       if (/(y+)/i.test(format)) {
	              format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
	       }
	       for (var k in date) {
	              if (new RegExp("(" + k + ")").test(format)) {
	                     format = format.replace(RegExp.$1, RegExp.$1.length == 1
	                            ? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
	              }
	       }
	       return format;
		}
		
		function danmuReport(e){
			var id = $(e).parent().parent().attr("data-id");
			var content = $(e).parent().prev().html().trim();
			danmuReportContainer.$emit('showRight', id,content);
		}
		
		function switchVideo(videoId,videoUrl) {
			
			$("#movieId").val(videoId);
			isCompeted();
			dp1.switchVideo(
				{
		            url: videoUrl,
		            type: 'auto'  
				},
	       		{
	                id: videoId,
		            readAPI: '/hoyo/movie/bullets',
		            sendAPI: '/hoyo/bullet/new'
	            }
	       );
	    }
		
		var danmuReportContainer = new Vue({
          components: {
              aside: VueStrap.aside
          },
          el: "#danmu-report",
          data: {
              showRight: false,
              right: false,
              danmuId:1,
              content:'',
              choosed:true,
              inputed:false,
              reportError:false,
              reportType:['违法违禁','色情低俗','赌博诈骗','人身攻击','侵犯隐私','垃圾广告','视频无关','引战','剧透','其它']
          },
          events:{
        	'showRight':function(id,content){
        		this.$set('showRight',true);
        		this.$set('danmuId',id);
        		this.$set('content',content);
        	}
       	  },
       	  ready:function (){
       	  	$("#danmu-report").show();
       	  },
       	  methods:{
       	  	radioClick:function(type){
       	  		if(type == '其它'){
       	  			this.$set('inputed',true);
       	  		}else{
       	  			this.$set('inputed',false);
       	  		}
       	  		this.$set('choosed',false);
       	  		this.textareaChanged();
       	  	},
       	  	reportAjax:function(id,description){
       	  		this.$set('showRight',false);
       	  		$("#danmu-report-textarea").val("");
       	  		$.ajax({
  					method:"POST",
  					url:"/hoyo/bullet/report", 
  					data:"danmu_id="+id+"&&description="+description,
  					success:function(msg){
  						console.log("POST DANMU REPORT SUCCESS: "+msg);
  					}
  				});
       	  	},
       	  	reportSubmit:function(){
       	  		var description = $("#danmu-report input:radio:checked").val();
       	  		var id= $("#danmuId").val();
       	  		if(description == '其它'){
       	  			description = $("#danmu-report-textarea").val().trim();
       	  			if(""!=description){
       	  				this.reportAjax(id,description);
       	  			}else{
       	  				this.$set('reportError',true);
       	  			}
       	  		}else{
       	  			this.reportAjax(id,description);
       	  		}
       	  		console.log("danmu_id="+id+"&&description="+description);
       	  	},
       	  	textareaChanged:function(){
       	  		this.$set('reportError',false);
       	  	}
       	  }
     	 });
		
		var Messenger = {
			show : function(message){
				$("#messageBody").html(message);
				$("#myModal").modal("show");
			}
		}
		
		function sendReplyComment(e, commentId,userId, replyType){
			var comment = $(e).parent().prev().children("textarea").val().trim();
			console.log("comment:"+comment+",commentId:"+commentId+",userId="+userId);
			if(comment == ""){
				return ;
			}
			$(e).parent().prev().children("textarea").val("");
			$(e).parent().parent().parent().remove();
			$.get({
				url:"/hoyo/user/comment/reply",
				data:"commentId="+commentId+"&comment="+comment+"&replyUserId="+userId,
				success:function(data){
					var result = JSON.parse(data);
					console.log(result);
					if(result.success){
						var index = commentVM.findCommentIndexByCommentId(commentId, replyType);
						console.log("index:"+index);
						var comment;
						if(replyType == 0){
							comment = commentVM.topComments[index];
							comment.pageInfo = result.pageInfo;
						}else{
							comment = commentVM.commentPage.list[index];
							comment.pageInfo = result.pageInfo;
						}
					}else{
						
					}
				}
			});
		}
		
		function closeWin(e){
			console.log("close");
			$(e).parent().parent().parent().remove();
		}
		
	    function submitLike(){
			var type = $("#user-like-catalog").html().trim();
			$("#user-like-catalog").attr("disabled",true);
			if(type=="收藏该视频"){
				$.post({
					url:"/hoyo/user/catalog/shoucang", 
					data:"catalogId="+[[${catalog.id}]],
					success:function(data){
						var result = JSON.parse(data);
						if(result.success){
							$("#user-like-catalog").attr("disabled",false);
							$("#user-like-catalog").html("已收藏");
						}
						$("#user-like-catalog").attr("disabled",false);
					}
				});
			}else{
				$.post({
					url:"/hoyo/user/catalog/cancelshoucang", 
					data:"catalogId="+[[${catalog.id}]],
					success:function(data){
						var result = JSON.parse(data);
						if(result.success){
							$("#user-like-catalog").attr("disabled",false);
							$("#user-like-catalog").html("收藏该视频");
						}
						$("#user-like-catalog").attr("disabled",false);
					}
				});
			}
		} 
		
		
		function catalogReport(){
			MovieReportContainer.fadeModal = true;
		}
		
		
		
		var MovieReportContainer = new Vue({
          components: {
              modal: VueStrap.modal
          },
          el: "#movie-report",
          ready:function (){
       	  	$("#movie-report").show();
       	  },
          data: {
          	 fadeModal:false,
          	 placeholder:"",
          	 typeText:"问题类型和出现位置",
          	 hasError:false,
          	 errorMsg:'',
          	 info:{
          	 	catalogId:[[${catalog.id}]],
          	 	type:"",
          	 	description:""
          	 }
          },
          methods:{
          	submited:function(){
          		$("#movie-report-btn").attr("disabled",true);
          		console.log(this.info.type+"    "+this.info.description);
          		if(this.info.type.trim()==""||this.info.description.trim()==""||this.info.description.trim().length>200){
          			MovieReportContainer.hasError=true;
          			MovieReportContainer.errorMsg = "请填写合法的信息！";
          			$("#movie-report-btn").attr("disabled",false);
          		}else{
          			MovieReportContainer.hasError=false;
          		}
          		if(MovieReportContainer.hasError){
          			return ;
          		}
          		console.log(JSON.stringify(MovieReportContainer.info));
          		
          		$.post({
					url:"/hoyo/user/catalog/report",
					data:"catalogId="+MovieReportContainer.info.catalogId+"&type="+MovieReportContainer.info.type+"&description="+MovieReportContainer.info.description,
					success:function(data){
						var result = JSON.parse(data);
						console.log(result);
						if(result.success){
							console.log("成功");
						}else{
							console.log("成功");
						}
						MovieReportContainer.fadeModal=false;
						MovieReportContainer.info.type ="";
						MovieReportContainer.info.description ="";
						$("#movie-report-btn").attr("disabled",false);
					}
				});
				
          	},
          	selected:function(type){
          		switch(type)
				{
					case 1: 
						MovieReportContainer.typeText="违规内容出现位置";
						MovieReportContainer.placeholder="如 视频 xx分xx秒 出现。。。";
						MovieReportContainer.info.type="存在色情、暴力、反动内容";
						break;
					case 2: 
					  	MovieReportContainer.typeText="重复稿件id号";
						MovieReportContainer.placeholder="如 稿件的播放地址url";
						MovieReportContainer.info.type="与站内其他视频重复";
						break;
					case 3: 
					  	MovieReportContainer.typeText="问题类型和出现位置";
						MovieReportContainer.placeholder="";
						MovieReportContainer.info.type="有其它问题";
						break;
				}
          	},
          	checkInput:function(value){
          		MovieReportContainer.info.description = value;
          		if(value.length > 200){
          			MovieReportContainer.hasError = true;
          			MovieReportContainer.errorMsg = '不能超过200个字符';
          		}else{
          			MovieReportContainer.hasError = false;
          		}
          	}
          }
     	 });
		
		
		var CommentReportContainer = new Vue({
	          components: {
	              modal: VueStrap.modal
	          },
	          el: "#comment-report",
	          ready:function (){
         	  	$("#comment-report").show();
         	  },
	          data: {
	          	 fadeModal:false,
	          	 hasError:false,
	          	 errorMsg:'',
	          	 selectOther:false,
	          	 info:{
	          	 	reason:'',
	          	 	commentId:1,
	          	 	movieId:1,
	          	 	type:1
	          	 }
	          },
	          methods:{
	          	submited:function(){
	          		$("#comment-report-btn").attr("disabled",true);
	          		console.log(CommentReportContainer.info);
	          		if(this.info.reason.trim()==""||this.info.reason.trim().length>200){
	          			CommentReportContainer.hasError=true;
	          			CommentReportContainer.errorMsg = "请填写合法的信息！";
	          			$("#comment-report-btn").attr("disabled",false);
	          		}else{
	          			CommentReportContainer.hasError=false;
	          		}
	          		if(CommentReportContainer.hasError){
	          			return ;
	          		}
	          		
	          		console.log(JSON.stringify(CommentReportContainer.info));
	          		
	          		$.post({
						url:"/hoyo/user/comment/report",
						data:"movieId="+CommentReportContainer.info.movieId+"&commentId="+CommentReportContainer.info.commentId+"&reason="+CommentReportContainer.info.reason+"&type="+CommentReportContainer.info.type,
						success:function(data){
							var result = JSON.parse(data);
							if(result.success){
								console.log("成功");
							}else{
								console.log("成功");
							}
							CommentReportContainer.fadeModal=false;
							CommentReportContainer.info.reason ='';
							$("#comment-report-btn").attr("disabled",false);
						}
					});
	          		
	          	},
	          	selected:function(type){
	          		if(type=="其他"){
	          			CommentReportContainer.selectOther = true;
	          			CommentReportContainer.info.reason = "";
	          		}else{
	          			CommentReportContainer.selectOther = false;
	          			CommentReportContainer.info.reason = type;
	          		}
	          	},
	          	checkInput:function(value){
	          		CommentReportContainer.info.reason = value;
	          		if(value.length > 200){
	          			CommentReportContainer.hasError = true;
	          			CommentReportContainer.errorMsg = '不能超过200个字符';
	          		}else{
	          			CommentReportContainer.hasError = false;
	          		}
	          	}
	          }
	     	 });
	</script>
</html>










